<div class='col-xs-12 position-r p-l-zero p-r-zero'>
    <div class='position-a ' style="right:8%;top:2%;z-index: 11">
        <select id="date_select" name="date" class="form-control">
            <option value="5"  {:input("date",5)==5?"selected":""}>本月</option>
            <option value="6" {:input("date",5)==6?"selected":""}>上月</option>
        </select>
    </div>
    <div class="col-xs-12 text-center text-primary m-t-lg p-l-zero p-r-zero">
        <h3>{$year|default=''}年-年度统计</h3>
        <h2>
            <span style="font-size: 18px;">完成</span>
            {$cout_year||array_sum}
            <span style="font-size: 18px;position: relative;bottom: 15%">次</span>
        </h2>
    </div>    
    <div class="col-xs-12 p-l-zero p-r-zero" id="year_chart" style="height: 26rem"></div>    
    <div class="col-xs-12 text-center text-primary">
        <h3>{$month|default=''}月-月度统计</h3>
        <h2>
            <span style="font-size: 18px;">完成</span>
            {$cout_daily|array_sum}
            <span style="font-size: 18px;">次</span>
        </h2>
    </div>    
    <div class="col-xs-12  p-l-zero p-r-zero" id="month_chart" style="height: 26rem"></div> 
</div>
<div id="logout_div" class="row" style ="position:fixed;bottom: 0px;width:100%;background-color: white" >
    <div class="col-xs-12 text-center" style="position:static">
        <a href="{:merge_url('user/login');} " class=""  style='color: #286090;font-size:5rem;border-radius: 50%;position: relative;top: -5px'>
            <span  class="glyphicon glyphicon-log-out"></span>
        </a>
    </div>
</div>

<script>
$(function($) {
    
    $("#add_div").hide();
    
    $("#date_select").on('change',function() 
    {
            let url =  "{:merge_url('plan_stats',['date'=>5]);}&date="+$(this).val();
            $.get(url,{},function(res) {
                  $("#content_replace").html(res);
        })
     });
    
    var chart1 = $('#year_chart').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false // 禁用版权信息
        },
        title: {
            text: ''
        },
        // xAxis:[],
        xAxis: {
            categories: {$cout_year|array_keys|json_encode|raw},
        },
        yAxis: [{ // Primary yAxis
            title: {
                text: ' ',
            }
        },
        { // Secondary yAxis
            title: {
                text: ' ',
            },
            labels: {
                format: '{value}%',
            },
            opposite: true
        }],
        tooltip: {
            shared: true

        },
        plotOptions: {
            column: {}
        },
        subtitle: {
            //            text: '数据截止：昨天',
            align: 'right',
            x: -10
        },
        series: [{
            name: '完成数',
            data: {$cout_year|array_values|json_encode},
        },
        ]

    });
    var chart1 = $('#month_chart').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false // 禁用版权信息
        },
        title: {
            text: ''
        },
        // xAxis:[],
        xAxis: {
            categories: {$cout_daily|array_keys|json_encode|raw},
        },
        yAxis: [{ // Primary yAxis
            title: {
                text: ' ',
            }
        },
        { // Secondary yAxis
            title: {
                text: ' ',
            },
            labels: {
                format: '{value}%',
            },
            opposite: true
        }],
        tooltip: {
            shared: true

        },
        plotOptions: {
            column: {}
        },
        subtitle: {
            //            text: '数据截止：昨天',
            align: 'right',
            x: -10
        },
        series: [{
            name: '完成数',
            data: {$cout_daily|array_values|json_encode},
        },
        ]

    });
    });
</script>